html,
body,
.warp {
  height: 100%;
}
.warp {
  background-image: url('../../components/game/back-play.jpg') !important;
  background-repeat: no-repeat;
  width: 100%;
  user-select: none;
  background-size: 100% 100%;
  .back {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    .cards {
      margin-right: 40px;
      margin-top: 30px;
      width: 75px;
      height: 100px;
      background: url('../../components/game/card-back.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      float: right;
      .cardsNum {
        color: #e6d3a4;
        font-size: 1.8em;
        margin-left: 10px;
        align-self: flex-end;
        text-shadow: #000 3px 3px 5px;
        text-stroke: 1.5px #000;
        -webkit-text-stroke: 1.5px #000;
        font-weight: bold;
      }
    }
    .record {
      margin-top: 40px;
      // right: 120px;
      height: 30px;
      color: #c5b58b;
      font-size: 1.2em;

      .time {
        margin-right: 20px;
      }
    }
    .pile {
      position: absolute;
      left: 35%;
      top: 50%;
      margin-left: -77px;
      margin-top: -109px;
      height: 217px;
      width: 770px;
      z-index: 1;
      // justify-content: flex-start;
      .pile-card {
        position: absolute;
        width: 154px;
        height: 100%;
        float: left;
        left: 0;
        background-size: 100% 100%;
        transition: all 0.4s;
        .points {
          position: absolute;
          left: 15px;
          top: 5px;
          font-size: 1.5em;
          letter-spacing: -3px;
        }
        .poker {
          position: absolute;
          left: 10px;
          top: 35px;
        }
        .direction {
          position: absolute;
          bottom: 0;
          background: rgba(0, 0, 0, 0.4);
          width: 100%;
          height: 50%;
          font-size: 1.5em;
          font-weight: bold;
          color: rgb(230, 205, 152);
          font-family: 'FangSong';
          text-align: center;
          .pileOperating {
            color: yellow;
          }
          p {
            line-height: 30px;
          }
        }
      }
    }
    .Self {
      position: relative;
      margin: 0 15px 0 0;
      width: 100%;
      height: 360px;
      z-index: 2;
      align-self: flex-end;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      border-radius: 10px;
      transition: all 0.3s;
      .state {
        position: relative;
        order: 2;
        border-radius: 10px;
        height: 300px;
        width: 200px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .hand {
          position: absolute;
          left: -251px;
          bottom: 0;
          width: 250px;
          height: 70px;
          background: url('../../components/game/hand-ziji.png') no-repeat;
          background-size: 100% 100%;
          word-spacing: 5px;
          color: #fff;
          text-align: right;
          line-height: 60px;
          padding-right: 10px;
          span {
            font-size: 2.7em;
            text-shadow: #000 3px 3px 2px;
            text-stroke:1px #000;
            -webkit-text-stroke:1px #000;
            font-family: fantasy;
          }
          .hand-ceiling {
            font-size: 2em;
          }
        }
        .con-left {
          align-self: flex-end;
          .name {
            font-size: 1.6em;
          }
          .HP {
            margin-left: 3.5px;
            margin-bottom: 17px;
          }
          .hand-length {
            position: absolute;
            bottom: 0;
            left: -10px;
            display: block;
            width: 70px;
            height: 50px;
            background: url('../../components/game/hand.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              font-size: 2em;
              color: #fff;
              text-shadow: #000 3px 3px 2px;
              text-stroke:1px #000;
              -webkit-text-stroke:1px #000;
              font-family: fantasy;
            }
          }
        }
        .identity {
          position: absolute;
          right: 0;
        }
        .equipment {
          position: absolute;
          right: 4.5px;
          bottom: 50px;
          display: flex;
          align-self: flex-end;
          overflow: hidden;
          width: 82%;
          color: #000;
          font-size: 1.3em;
          font-family: cursive;
          text-align: center;
          flex-wrap: wrap;
          .defenseHorse,
          .pursuitHorse {
            width: 50%;
            flex-direction: row;
            padding-right: 5px;
            font-size: 0.7em;
          }
          & > div {
            width: 100%;
            height: 37px;
            margin-bottom: 5px;
            cursor: pointer;
            overflow: hidden;
          }
          .ca {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            line-height: 35px;
          }
          .caAction {
            transform: translateX(-200px);
            span {
              transition: all 0.3s;
            }
          }
        }
      }
      .hand-cards {
        position: relative;
        order: 2;
        margin-left: 20px;
        height: 215px;
        width: 142.14px;
        transition: bottom 1s;
        cursor: pointer;
        .hand-card {
          position: absolute;
          z-index: 4;
          left: 60%;
          // width: 215px;
          width: 70px;
          height: 130px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          animation: handCardAmd 1s 1 forwards;
          transition: all 0.2s;
          .points {
            position: absolute;
            left: 20px;
            top: 10px;
            font-size: 1.5em;
            letter-spacing: -3px;
          }
          .poker {
            position: absolute;
            left: 15px;
            top: 45px;
          }
        }
      }
    }
    .oneSelf {
      .state {
        background: url('../../components/game/liubei.png') no-repeat;
        background-size: 100% 100%;
        .equipment {
          .defenseHorse,
          .pursuitHorse {
            border: 1px solid #000;
          }
          & > div {
            border: 1px solid #aeaeae;
            background: rgba(255, 255, 255, 0.6);
            &:hover {
              background: rgba(0, 0, 0, 0.1);
              color: #fff;
            }
          }
        }
        .seat{
          bottom: 0;
        }
      }
    }
    .twoSelf {
      position: absolute;
      left: 560px;
      top: 0;
      width: 200px;
      height: 300px;
      .state {
        background: url('../../components/game/caocao.png') no-repeat;
        background-size: 100% 100%;
        .equipment {
          .defenseHorse,
          .pursuitHorse {
            width: 48.5%;
            border: 1px solid #000;
          }
          & > div {
            border: 1px solid #aeaeae;
            background: rgba(255, 255, 255, 0.6);
            // box-shadow: 10px 0px 20px #000000;
            width: 99%;
            margin-left: 2px;
          }
        }
        .con-left {
          position: relative;
          .HP {
            margin-bottom: 55px;
          }
        }
        .determine{
          top: auto;
          bottom: -20px;
          width: 100%;
          .bar{
            .bar-conte{
              .description{
                top: 10px;
                left: auto;
                right: 0;
                padding-left: 30px;
                padding-top: 4px;
                background: url('../../components/game/time.png') no-repeat;
                background-size:auto 100%;
                span{
                  display: block;
                  height: 100%;
                  background: linear-gradient(to right, black , transparent);
                }
              }
            }
          }
        }
        .seat{
          bottom: -50px;
        }
      }
    }
    .threeSelf {
      position: absolute;
      left: 1060px;
      top: 0;
      width: 200px;
      height: 300px;
      .state {
        background: url('../../components/game/caocao.png') no-repeat;
        background-size: 100% 100%;
        .equipment {
          .defenseHorse,
          .pursuitHorse {
            width: 48.5%;
            border: 1px solid #000;
          }
          & > div {
            border: 1px solid #aeaeae;
            background: rgba(255, 255, 255, 0.6);
            // box-shadow: 10px 0px 20px #000000;
            width: 99%;
            margin-left: 2px;
          }
        }
        .con-left {
          position: relative;
          .HP {
            margin-bottom: 55px;
          }
        }
        .determine{
          top: auto;
          bottom: -20px;
          width: 100%;
          .bar{
            .bar-conte{
              .description{
                top: 10px;
                left: auto;
                right: 0;
                padding-left: 30px;
                padding-top: 4px;
                background: url('../../components/game/time.png') no-repeat;
                background-size:auto 100%;
                span{
                  display: block;
                  height: 100%;
                  background: linear-gradient(to right, black , transparent);
                }
              }
            }
          }
        }
        .seat{
          bottom: -50px;
        }
      }
    }
  }
}
.footer {
  display: none;
}
.seat{
  position: absolute;
  left: 50%;
  margin-left: -10px;
  font-size: 2em;
  color: #211c19;
  font-family: cursive;
  font-weight: bold;
  text-shadow: #cfcaa3 5px 5px 5px;
}
.poker {
  background: url('../../components/game/design-color.png') no-repeat;
  width: 25px;
  height: 25px;
}
.poker1 {
  background-position: 0 0;
}
.poker2 {
  background-position: -29px 0;
}
.poker3 {
  background-position: 0 -29px;
}
.poker4 {
  background-position: -29px -29px;
}
.shake {
  animation:shaKeAmT 0.9s 1 forwards;
}
@keyframes shaKeAmT{
  0%{
    transform: translate(0,0); 
  }
  25%{
    transform: translate(10px,0); 
  }
  50%{
    transform: translate(-10px,0); 
  }
  100%{
    transform: translate(0,0); 
  }
}
@keyframes handCardAmd {
  0% {
    width: 70px;
    height: 130px;
    left: 40%;
    top: -300px;
  }
  100% {
    width:  150px;
    height: 100%;
    left: 0;
    top: 0;
  }
}
